<template>
  <div>
    <div class="userinfo anglebox buble-bg">
      <div
        @click="jump(item.path, item.name, item.val)"
        v-for="item in list"
        :key="item.name"
      >
        <div
          class="flex align-center p-16 text-left buble-line"
          v-if="item.show"
        >
          <div class="mr-12">
            <img :src="item.url" alt="" class="item-img" />
          </div>
          <div class="user">
            <div class="mb-2">{{ item.name }}</div>
            <div class="desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";
export default {
  name: "ChoiceNft",
  emits: ["choice"],
  props: {
    nft_entrance: Boolean,
    meta_switch: Boolean,
  },
  setup(props, { emit }) {
    const { t } = useI18n();
    const state = reactive({
      tabData: [
        {
          name: "NFT",
          path: "/nftHome",
          show: props.nft_entrance,
          val: "NFT",
          desc: t("universe.NFTdesc"),
          url: require("@/assets/theme1/header/NFT.png"),
        },
        {
          name: t("universe.universe"),
          path: "/universeHome",
          show: props.meta_switch,
          val: "universe",
          desc: t("universe.universedesc"),
          url: require("@/assets/theme1/header/universe.png"),
        },
      ],
    });
    const list = state.tabData;
    const $router = useRouter();
    const $store = useStore();
    const jump = (path, name, val) => {
      emit("choice", name);
      $store.commit("user/SET_NFT_PAGE", val);
      $router.push(path);
    };
    return {
      state,
      jump,
      list,
    };
  },
};
</script>

<style lang="less" scoped>
// 个人中心弹窗
.p-10 {
  padding-top: 10px;
}
.userinfo {
  width: 300px;
  position: relative;
  // border-radius: 8px;
  // padding: 0 10px;
}
.user {
  // height: 44px;
  font-weight: bold;
  font-size: 12px;
  line-height: 17px;
}
.p-16 {
  padding: 16px;
}
.desc {
  font-size: 10px;
  line-height: 14px;
  color: #ffff;
  opacity: 0.5;
  font-weight: normal;
}
.mb-2 {
  margin-bottom: 2px;
}
.mr-12 {
  margin-inline-end: 12px;
}
.item-img {
  display: block;
  width: 30px;
  height: 30px;
}
.name {
  width: 80px;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-inline-start: 6px;
}
.center-model {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.mb-8 {
  margin-bottom: 8px;
}
.logout {
  height: 37px;
  line-height: 37px;
  color: #cf2f43;
}
</style>
